<template>
	<view>
		<my-navbar :title="`${squadData.gradeName}${squadData.squadName}班`"></my-navbar>
		<view class="app-background"></view>
		<view class="selectSquadMember-title">
			<view>请勾选需要发送的成员</view>
			<view>已选 {{ selectedList.length }}/{{ studentList.length }}</view>
		</view>
		<view class="selectSquadMember-list">
			<view class="list-item" v-for="(i, j) in studentList" :key="j" @click="clickItem(i)" hover-class="button-hover">
				<view class="item-left">
					<image v-if="i.selected" class="left-checkbox" src="/static/notice/icon_radio1.png"></image>
					<image v-else class="left-checkbox" src="/static/notice/icon_radio0.png"></image>
					<image class="left-headicon" :src="i.childPhoto ? i.childPhoto : '/static/notice/headicon_none.png'" mode="aspectFill"></image>
				</view>
				<view class="item-right">
					<view class="right-info">
						<view class="info-name">{{ i.childName }}</view>
					</view>
					<image class="right-icon" src="/static/notice/icon_right.png"></image>
				</view>
			</view>
		</view>
		<view v-if="studentList.length > 6" class="page-nomore">---没有更多了---</view>
		<!-- 浮动底部 START -->
		<view class="app-offset">
			<view class="selectSquadMember-button"></view>
			<safe-area></safe-area>
		</view>
		<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
			<view class="selectSquadMember-button app-button" hover-class="hover" :class="[isPass ? '' : 'disabled']" @click="clickConfirmButton">确定</view>
			<safe-area></safe-area>
		</view>
		<!-- 浮动底部 END -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			squadData: {}
		};
	},
	methods: {
		clickItem(student) {
			if (student.selected === undefined) this.$set(student, 'selected', false);
			student.selected = student.selected ? false : true;
		},
		clickConfirmButton() {
			if (!this.isPass) {
				this.$showToast('请选择学生成员');
				return;
			}
			uni.$emit('selectStudentMember', this.squadData);
		}
	},
	computed: {
		studentList() {
			if (!Array.isArray(this.squadData.studentList)) this.$set(this.squadData, 'studentList', []);
			return this.squadData.studentList;
		},
		selectedList() {
			return this.studentList.filter(i => i.selected)
		},
		isPass() {
			return this.selectedList.length > 0;
		}
	},
	onLoad() {
		this.squadData = uni.getStorageSync('squadData') || {};
	},
	onUnload() {
		uni.clearStorageSync('squadData');
		uni.$off('selectStudentMember');
	}
};
</script>

<style lang="less" scoped>
.page-nomore {
	transform: translateY(-15rpx);

	font-size: 24rpx;
	text-align: center;
	color: #7f7f7f;
}
	
.selectSquadMember-title {
	font-size: 32rpx;
	color: #707070;
	padding: 30rpx;

	display: flex;
	justify-content: space-between;
}

.selectSquadMember-list {
	background-color: #ffffff;
	margin-bottom: 30rpx;
	.list-item {
		padding-left: 30rpx;

		transition: all 0.3s;

		display: flex;

		&:last-child {
			.item-right {
				border-bottom: none;
			}
		}

		.item-left {
			display: flex;
			align-items: center;

			.left-checkbox {
				width: 42rpx;
				height: 42rpx;
			}

			.left-headicon {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin: 0 30rpx;
			}
		}

		.item-right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #eeeeee;

			padding: 30rpx 0;
			padding-right: 30rpx;

			.right-info {
				.info-name {
					font-size: 32rpx;
					color: #222222;
					margin-bottom: 10rpx;
				}

				.info-message {
					font-size: 28rpx;
					color: #909399;
				}
			}

			.right-icon {
				width: 14rpx;
				height: 23rpx;
			}
		}
	}
}

.selectSquadMember-button {
	height: 88rpx;
	background-color: #ff6600;
	border-radius: 44rpx;
	margin: 0 30rpx 30rpx 30rpx;

	font-size: 36rpx;
	color: #ffffff;

	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
